<template>
  <div>
    <el-card shadow="hover" class="box-card">
      <div slot="header" class="clearfix">
        <span>问题类型</span>
      </div>
      <div>
        <el-button type="success" size="small" class="addBut" @click="addOne({ id: 0, level: 2 }, true)"
          >+ 新增一级</el-button
        >
        <el-tree :data="problemData" class="treeBody" node-key="id" default-expand-all :expand-on-click-node="false">
          <div class="custom-tree-node" slot-scope="{ node, data }">
            <div>{{ data.label }} （编号：{{ data.number }}）</div>
            <div>
              <el-button
                v-if="data.level === 0"
                icon="el-icon-circle-plus"
                type="primary"
                size="mini"
                @click="() => addOne(data, true)"
              ></el-button>
              <el-button
                icon="el-icon-edit"
                type="success"
                size="mini"
                @click="() => addOne(data, false, node)"
              ></el-button>
              <el-button
                icon="el-icon-delete-solid"
                type="danger"
                size="mini"
                @click="() => remove(node, data)"
              ></el-button>
            </div>
          </div>
        </el-tree>
      </div>
    </el-card>
    <!-- 新增问题类型 -->
    <el-dialog
      :title="
        (addOn ? '新增' : '修改') +
        (problemForm.level == 2
          ? '一级'
          : problemForm.level == 0 && addOn
          ? '二级'
          : problemForm.level == 0 && !addOn
          ? '一级'
          : '二级') +
        '问题'
      "
      :visible.sync="problemWin"
      width="30%"
      center
      @close="problemClose"
    >
      <div>
        <el-form label-width="140px">
          <el-form-item
            :label="
              (problemForm.level == 2
                ? '一级'
                : problemForm.level == 0 && addOn
                ? '二级'
                : problemForm.level == 0 && !addOn
                ? '一级'
                : '二级') + '类型名称'
            "
          >
            <el-input v-model="problemForm.typeName" placeholder="请输入类型名称"></el-input>
          </el-form-item>
          <el-form-item
            :label="
              (problemForm.level == 2
                ? '一级'
                : problemForm.level == 0 && addOn
                ? '二级'
                : problemForm.level == 0 && !addOn
                ? '一级'
                : '二级') + '类型编号'
            "
          >
            <el-input v-model="problemForm.number" placeholder="请输入类型编号"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer">
        <el-button @click="problemWin = false">取 消</el-button>
        <el-button type="primary" @click="subProblem()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import * as api from '@/api/project'
let id = 1000
export default {
  data() {
    return {
      problemData: [],
      // 问题
      problemWin: false,
      problemForm: {
        id: 0,
        subId: 0,
        level: 0,
        typeName: '',
        number: '',
      },
      addOn: true,
      editData: {},
    }
  },
  created() {
    this.getList(1)
  },
  methods: {
    // 获取列表
    getList() {
      api.selectmattertype().then(res => {
        if (res.code == '200') {
          this.problemData = []
          let list = res.data
          for (let i = 0; i < list.length; i++) {
            const item = list[i]
            let obj = {}
            obj.id = item.id
            obj.label = item.typeName
            obj.number = item.number
            obj.level = 0
            obj.children = []
            for (let j = 0; j < item.subTypeDTOS.length; j++) {
              const jtem = item.subTypeDTOS[j]
              let jobj = {}
              jobj.id = jtem.id
              jobj.label = jtem.subTypeName
              jobj.number = jtem.number
              jobj.level = 1
              obj.children.push(jobj)
            }
            this.problemData.push(obj)
          }
        }
      })
    },
    // 删除
    remove(node, data) {
      this.$confirm('确定删除此问题类型?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        if (data.level == 0) {
          api.deletetype({ id: data.id }).then(res => {
            if (res.code == '200') {
              this.$message({
                message: res.msg,
                type: 'success',
              })
              this.getList(1)
            }
          })
        } else {
          api.deletesubtype({ subTypeId: data.id }).then(res => {
            if (res.code == '200') {
              this.$message({
                message: res.msg,
                type: 'success',
              })
              this.getList(1)
            }
          })
        }
      })
    },
    // 提交新增
    subProblem() {
      if (!this.problemForm.typeName) {
        this.$message.error('请输入类型名称')
        return
      }
      if (!this.problemForm.number) {
        this.$message.error('请输入类型编号')
        return
      }
      if (this.problemForm.level == 2) {
        this.classPost(false) // 新增一级
      } else if (this.problemForm.level == 0 && this.addOn) {
        this.subClassPost(false) // 新增二级
      } else if (this.problemForm.level == 0 && !this.addOn) {
        this.classPost(true) // 编辑一级
      } else if (this.problemForm.level == 1) {
        this.subClassPost(true) // 编辑二级
      }
    },
    // 编辑父类
    classPost(edit) {
      const data = { typeName: this.problemForm.typeName, number: this.problemForm.number }
      if (edit) {
        data.id = this.problemForm.id
      }
      api.updateorsave(data).then(res => {
        if (res.code == '200') {
          this.problemWin = false
          this.$message({
            message: res.msg,
            type: 'success',
          })
          this.problemClose()
          this.getList(1)
        } else {
          this.$message({
            message: res.data,
            type: 'error',
          })
        }
      })
    },
    // 编辑子类
    subClassPost(edit) {
      const data = {
        typeId: this.problemForm.id,
        subTypeName: this.problemForm.typeName,
        number: this.problemForm.number,
      }
      if (edit) {
        data.subTypeId = this.problemForm.subId
      }
      api.updateorsubsave(data).then(res => {
        if (res.code == '200') {
          this.problemWin = false
          this.$message({
            message: res.msg,
            type: 'success',
          })
          this.problemClose()
          this.getList(1)
        } else {
          if (res.data == undefined) {
            this.$message({
              message: res.msg,
              type: 'error',
            })
          } else {
            this.$message({
              message: res.data,
              type: 'error',
            })
          }
        }
      })
    },
    // 打开新增
    addOne(e, status, node) {
      this.addOn = status
      if (!status) {
        this.problemForm.typeName = e.label
        this.problemForm.number = e.number
      }
      if (e.level == 0 || e.level == 2) {
        this.problemForm.id = e.id
      } else {
        this.problemForm.id = node.parent.data.id
        this.problemForm.subId = e.id
      }
      this.problemForm.level = e.level
      this.problemWin = true
    },
    // 关闭新增
    problemClose() {
      this.problemForm = {
        id: 0,
        subId: 0,
        level: 0,
        typeName: '',
        number: '',
      }
    },
  },
}
</script>

<style lang="scss" scoped>
@import './problem.scss';
</style>
